<template>
  <view class="login-area">
    <view class="content">
      <view class="text-area">
        <view class="h1">{{ $t('login.welcome') }}</view>
        <view class="h1">{{ $t('login.info') }}</view>
      </view>
      <view class="form-area">
        <view class="view-input flex">
          <image src="@/static/image/user.png" alt="error" class="label-img" />
          <input
            class="uni-input"
            :placeholder="$t('login.inputUsername')"
            v-model="formData.username"
          />
        </view>
        <view class="view-input flex">
          <image src="@/static/image/pwd.png" alt="error" class="label-img" />
          <input
            class="uni-input"
            :placeholder="$t('login.inputPassword')"
            v-model="formData.password"
            type="text"
            v-if="show"
          />
          <input
            class="uni-input"
            :placeholder="$t('login.inputPassword')"
            v-model="formData.password"
            type="password"
            v-else
          />
          <u-icon @click="show = !show" :name="!show ? 'eye-off' : 'eye'"></u-icon>
        </view>
        <view class="view-input flex" v-if="isCasCode">
          <input class="uni-input" :placeholder="$t('login.inputCode')" v-model="formData.code" />
          <view class="code">
            <image :src="codeUrl" @click="getPicCode" class="code-img" mode="widthFix" />
          </view>
        </view>
        <view class="view-input flex" v-else-if="isFactorcode">
          <input
            class="uni-input"
            :placeholder="$t('login.inputCode')"
            v-model="formData.factorCode"
          />
          <!-- <view class="wechat-code" @click="launchMiniProgram">
            获取验证码
          </view> -->
        </view>
        <view class="password-action flex">
          <u-checkbox-group v-model="remember">
            <u-checkbox :label="$t('login.remember')" name="remember"></u-checkbox>
          </u-checkbox-group>
          <!-- <view class="reset-password" @click="resetPassword">修改密码</view> -->
        </view>
      </view>
      <u-button
        color="#006DCA"
        :text="$t('login.login')"
        :disabled="!codeUrl"
        @click="loginFun()"
      ></u-button>
      <!-- <view class="change-env" @click="changeEnv()">{{ $t('login.changeSystem') }}</view> -->
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>
<script>
import { mapGetters } from 'vuex'
import { getCaptcha } from '@/api/user'
import { encrypt } from '@/utils/rsaEncrypt'
import { setBaseUrl } from '@/config'
import Settings from '@/config/settings'
const { systemCode } = Settings
export default {
  data() {
    return {
      codeUrl: '',
      show: false,
      remember: [],
      formData: {
        username: '',
        password: '',
        code: ''
      },
      codeEnable: false,
      sysCasLoginFlag: false,
      sysCasLoginMode: false,
      sysCasWhiteFactorChannel: [],
      sweixin: null
    }
  },
  computed: {
    ...mapGetters(['envUrl', 'token']),
    // 是cas或者验证码
    isCasCode() {
      // 白名单
      const isWhite = this.sysCasWhiteFactorChannel.includes(systemCode)
      const codeCas =
        this.sysCasLoginFlag !== 'Y' || this.sysCasLoginMode === 'client_password' || isWhite
      return codeCas && this.codeEnable
    },
    // 是cas，并且需要双因素认证
    isFactorcode() {
      // 白名单
      const isWhite = this.sysCasWhiteFactorChannel.includes(systemCode)
      return (
        this.sysCasLoginFlag === 'Y' && this.sysCasLoginMode === 'client_factorcode' && !isWhite
      )
    }
  },
  onLoad() {
    // #ifdef APP-PLUS
    // plus.share.getServices((s) => {
    //   var shares={};
    //   for (var i = 0; i < s.length; i++) {
    //     var t = s[i]
    //     shares[t.id] = t
    //   }
    //   this.sweixin = shares['weixin']
    // }, function(e){
    //     console.log("获取分享服务列表失败："+e.message);
    // })
    //#endif
  },
  onShow() {
    uni.hideTabBar()
    // if (this.envUrl && this.envUrl.value) {
    //   setBaseUrl(this.envUrl.value);
    //   setTimeout(() => {
    //     this.getPicCode();
    //   });
    // } else {
    //   uni.navigateTo({
    //     url: '/pages/login/urlEnv',
    //   });
    // }
    this.getPicCode()
    uni.getStorage({
      key: 'save_login_info',
      success: (result) => {
        let res = result.data
        this.formData.username = res.username
        this.formData.password = res.password
        this.remember = res.remember
      }
    })
  },
  methods: {
    launchMiniProgram() {
      //#ifdef APP-PLUS
      // this.sweixin ? this.sweixin.launchMiniProgram({
      //   id: ''
      // }) : plus.nativeUI.alert('当前环境不支持微信操作!')
      //#endif
    },
    getPicCode() {
      getCaptcha().then((res) => {
        this.codeUrl = res.img
        this.formData.uuid = res.uuid
        this.codeEnable = res.codeEnable
        this.sysCasLoginFlag = res.sys_cas_login_flag || null
        this.sysCasLoginMode = res.sys_cas_login_mode || null
        this.sysCasWhiteFactorChannel = res.sys_cas_white_factor_channel
          ? res.sys_cas_white_factor_channel.split(',')
          : []
      })
    },
    changeEnv() {
      uni.navigateTo({
        url: '/pages/login/urlEnv'
      })
    },
    resetPassword() {
      uni.navigateTo({
        url: '/pages/login/resetPassword'
      })
    },
    onUserName(e) {
      this.formData.username = e.target.value
    },
    onPassword(e) {
      this.formData.password = e.target.value
    },
    async loginFun() {
      if (!this.formData.username) {
        uni.showToast({
          title: this.$t('login.inputUsername'),
          duration: 2000,
          icon: 'none'
        })
        return
      }
      if (!this.formData.code && this.isCasCode) {
        uni.showToast({
          title: this.$t('login.inputCode'),
          duration: 2000,
          icon: 'none'
        })
        return
      }
      let params = JSON.parse(JSON.stringify(this.formData))
      if (this.remember.length) {
        uni.setStorage({
          key: 'save_login_info',
          data: {
            remember: this.remember,
            username: params.username,
            password: params.password
          }
        })
      } else {
        uni.removeStorage({
          key: 'save_login_info'
        })
      }
      params.password = encrypt(params.password)
      const loginParam = Object.assign(params, { channel: systemCode })
      uni.showLoading()
      const login = await this.$store.dispatch('Login', loginParam)
      uni.hideLoading()
      if (login && login.code === 0) {
        this.reLaunch('/pages/transportTask/index')
      } else {
        uni.showToast({
          title: login.msg,
          duration: 2000,
          icon: 'none'
        })
        this.getPicCode()
      }
    },
    navigateTo(url) {
      uni.navigateTo({
        url
      })
    },
    reLaunch(url) {
      uni.reLaunch({
        url
      })
    }
  }
}
</script>

<style lang="less" scoped>
.code-img {
  width: 210rpx;
  height: auto;
}
.login-area {
  min-height: 100vh;
  background-color: #ffffff;
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 60rpx;
  padding-top: 120rpx;
  .h1 {
    font-size: 26px;
  }
  .form-area {
    margin-top: 100rpx;
    margin-bottom: 20rpx;
    .view-input {
      margin-bottom: 40rpx;
      background-color: #f5f5f5;
      border-radius: 18rpx;
      height: 104rpx;
      box-sizing: border-box;
      padding: 0 20rpx;
      .uni-input {
        flex: 1;
        border: none;
        background: transparent;
      }
      .code {
        overflow: hidden;
        width: 260rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .wechat-code {
        padding: 10rpx;
        border-radius: 7rpx;
        color: #006dca;
      }
      &.flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .password-action {
      &.flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .reset-password {
        color: #006dca;
      }
    }
  }
  .label-img {
    width: 48rpx;
    height: 48rpx;
  }
  .change-env {
    color: #006dca;
    font-size: 32rpx;
    margin-top: 50rpx;
    text-align: right;
  }
}
</style>
